<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>误例分析</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
    integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
    integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
</head>

<body>
  <div class="container">
        <div class="card">
          <div class="card-body">
            <table id="summay-table" class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th style='text-align: center;'>
                    key
                  </th>
                  <th style='text-align: center;'>
                    value
                  </th>
                </tr>
              </thead>
              <tbody>
                {% for item in emr %}
                <tr>
                  <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                    {{item.key}}
                  </td>
                  <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                    {{item.value}}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
            <div id="graph-chart" style="height: 640px;width:100%">

            </div>
          </div>
        </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
    integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
    integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>
  <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
  <script>
    
    $(document).ready(function () {
        // console.log("{{ graph_option }}");
        var myChart = echarts.init(document.getElementById('graph-chart'));
        var option = {{ graph_option|safe }};
        option.series[0].roam = true;
        option.series[0].label = {show:true};
        for (var i = 0;i<option.series[0].links.length;++i){
          option.series[0].links[i].label.show = true;
        }
        console.log(option);
        myChart.setOption(option);
        
    });
  </script>
</body>

</html>